<template>
  <div class="">
    <div class="listBox_head">
      <el-button type="primary" @click="addStore">添加现有门店</el-button>
    </div>
    <ex-table
      ref="table"
      :loading="loading"
      :table-column="tableColumn"
      :table-data="tableData"
      @pageSizeChange="handleSizeChange"
      @currentPageChange="handleCurrentChange"
    >
     <template v-slot:merchantStatusDict="{ scope }">
        <div>
          <span v-if="scope.row.merchantLogoutStatus == 2">已注销</span>
          <span v-else>{{scope.row.merchantStatusDict}}</span>
        </div>
      </template>
      <template v-slot:operate="{ scope }">
        <el-button @click="lookDetail(scope.row)" size="small"
          >编辑</el-button
        >
        <!-- <el-button
          type="danger"
          size="small"
          @click="deleteMerchant(scope.row.id)"
          >删除</el-button
        > -->
      </template>
    </ex-table>
    <el-dialog title="添加客户" :visible.sync="dialogVisible" width="40%">
      <div class="add_boxls">
        <div class="add_box" style="margin-right: 16px" @click="">
          <img src="../img//add_customer1.png" alt="" />
          <span>现有门店</span>
        </div>
        <div class="add_box add_box2" @click="jumpAdd(0)">
          <img src="../img/add_customer2.png" alt="" />
          <span>添加新门店</span>
        </div>
      </div>
    </el-dialog>
    <addSrores 
      v-if="innerVisible"
      :visible.sync="innerVisible" 
      :id="addSroresId"
      @success="_handleSuccess">
    </addSrores>
  </div>
</template>
<script>
// components
import {
  chainshopList,
  chainshopDetail,
  addShop,
  editMerchant,
  deleteMerchant,
} from "@/api/chainManagement";
import handlePageMixin from "@/mixins/handlePageMixin";
import ExportExcelButton from "@/components/ExportExcelButton/index";
import addSrores from "./addSrores"
export default {
  //   name: "",
  components: {
    ExportExcelButton,
    addSrores
  },
  mixins: [handlePageMixin],
  data() {
    return {
      loading: false,
      buttonLoading: false,
      formInline: {
        businessLicence: "", //营业执照
        chainType: "", //连锁类型 1 直营店 2加盟店
        proceedsType: "", //收款类型 1 总部收款 2门店收款
      },
      status: 1,
      storeId: "", //关联门店id
      show: false,
      chainId: "", //总店id
      dialogVisible: false,
      innerVisible: false,
      addSroresId: '',
      tableData: [],
      tableColumn: [
        { prop: "merchantName", label: "店铺名称" },
        { prop: "businessLicence", label: "营业执照代码" },
        { prop: "phone", label: "联系电话" },
        { prop: "chainTypeDict", label: "连锁模式" },
        { prop: "proceedsTypeDict", label: "收款方式" },
        { prop: "shopTypeDict", label: "门店类型" },
        {  label: "商户状态" ,slot: true, slotName: "merchantStatusDict",},
        {
          label: "操作",
          slot: true,
          slotName: "operate",
          width: "320",
          fixed: "right",
        },
      ],
     
    };
  },
  created() {
    this.chainId = this.$route.query.id;
    this.getList();
  },
  computed: {},
  methods: {
    lookDetail(e) {
      console.log(e);
      //点击编辑
      this.addSroresId = e.id
      this.innerVisible = true;
    },
    addStore() {
      //现有门店
      this.addSroresId = ''
      this.status = 1;
      this.innerVisible = true;
    },
    jumpAdd() {
      //新门店
      this.$router.push({
        path: "/merchants/store-add",
        query: { chainId: this.chainId},
      });
    },
    getList() {
      const params = {
        ...this.pageOptions,
        chainId: this.chainId,
      };
      this.loading = true;
      chainshopList(params)
        .then((res) => {
          const { total, records } = res.result;
          this.$refs.table.pageOptions.total = total;
          this.tableData = records;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    deleteMerchant(id) {
      //删除deleteMerchant
      this.$confirm("是否删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteMerchant(id).then((res) => {
            this.$message({
              message: "删除成功",
              type: "success",
              duration: 1500,
            });
            setTimeout(() => {
              this.getList();
            }, 800);
          });
        })
        .catch(() => {});
    },
    _handleSuccess() {
      this.getList();
    },
  },
};
</script>
<style lang="scss" scoped>
.el-card-title {
  font-size: 20px;
}
</style>
<style lang="scss" scoped>
.name_title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 20px;
}
.head {
  box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
  background-color: #fff;
  border-radius: 8px;
  //   height: 120px;
  padding: 20px;
  display: flex;
  align-items: center;
}
.el-form--inline .el-form-item {
  margin-right: 40px;
}
::v-deep.el-input--medium .el-input__inner {
  width: 220px !important;
}
.el-input {
  width: 220px;
}
.listBox {
  box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
  background-color: #fff;
  border-radius: 8px;
  //   height: 120px;
  padding: 20px 20px;
  margin-top: 10px;
}
.list_search {
  display: flex;
  align-items: center;
  padding-top: 10px;
}
.table_list {
  display: flex;
  align-items: center;
  // border: 1px solid #DCDFE6;
  border-radius: 7px;
  width: 220px;
  margin-bottom: 10px;
}
.tableBox {
  width: calc(100% / 3);
  height: 36px;
  text-align: center;
  line-height: 36px;
  color: #303133;
  font-size: 14px;
  border: 1px solid #dcdfe6;
  border-right: 0;
}
.tableBox:first-child {
  border-radius: 7px 0px 0px 7px;
}
.tableBox:last-child {
  border-right: 1px solid #dcdfe6;
  border-radius: 0px 7px 7px 0px;
}
.spchoosetext {
  background-color: #fff4e6;
  color: #ff9300;
  // border: 1px solid #ff9300;
}
.listBox_head {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  
}
.el-select .el-input {
  width: 130px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
.head ::v-deep.el-input-group__prepend {
  width: 110px !important;
}
.button_box {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 50px;
}
.from_box {
  margin-bottom: 30px;
  display: flex;
  align-items: center;
}
.from_box_l {
  font-size: 14px;
  color: #606266;
  width: 240px;
  text-align: right;
}
.add_boxls {
  display: flex;
  align-items: center;
  justify-content: center;
}
.add_box {
  width: 45%;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: bold;
  height: 152px;
  cursor: pointer;
  background: #fdf6ec;
  border: 1px solid #f5dab1;
  color: #e6a23c;
}
.add_box2 {
  background: #ecf5ff;
  border: 1px solid #b3d8ff;
  color: #409eff;
}
.add_box:hover {
  opacity: 0.8;
}
.add_box img {
  width: 46px;
  height: 46px;
  margin-right: 12px;
}
</style>
